import { videoApi } from '@/api';
import { getGovernmentCourseWareDetailForPlan } from '@/api/Plan';

import { useRequest } from 'ahooks';
import { Descriptions } from 'antd';
import { isEmpty } from 'lodash-es';
import { useMemo } from 'react';
import { YmVideoPlayer } from 'ym-design';
import OStyle from './index.less';

const COURSEWARETYPEMAP: any = {
  '100': 'vido',
  '200': 'txt',
  '400': 'pdf',
  '300': 'paper',
};

/**
 * @desc 三种类型的课件详情整合
 */
export default function CourseWareDetailForPlan({
  coursewareId,
  noStyle,
  drawerWidth = 680,
}: {
  coursewareId?: string;
  noStyle?: boolean;
  drawerWidth?: number;
}) {
  const { data, loading } = useRequest(
    async () => {
      if (coursewareId) {
        const { data: _data }: any = await getGovernmentCourseWareDetailForPlan(coursewareId);
        _data.coursewareId = _data.guid;
        _data.coursewareType = COURSEWARETYPEMAP[String(_data.type)];
        // 自建视频课件 新增提交的是videoList，详情返回的是vedioInfo,平台视频课件新增和详情返回的都是 vedioId
        if (!isEmpty(_data.vedioInfo)) {
          _data.vedioId = JSON.parse(_data.vedioInfo)[0].hsVideoId;
        }
        return _data;
      }
    },
    {
      refreshDeps: [coursewareId],
    },
  );

  const videPlaySize = useMemo(() => {
    const videWidth = drawerWidth - 24 * 2;
    const videHieght = Math.floor(videWidth / 1.7);
    return { width: videWidth, height: videHieght };
  }, [drawerWidth]);

  const container = useMemo(() => {
    if (data) {
      if (data.coursewareType === 'pdf') {
        try {
          const src = JSON.parse(data.picTextContent).url;
          return <img width="100%" src={src} alt="pdf文件预览图" />;
        } catch (e) {
          return '资源发生未知的损坏,暂时无法查看';
        }
      } else if (data.coursewareType === 'txt') {
        return (
          <div dangerouslySetInnerHTML={{ __html: data.picTextContent ?? '' }} className={OStyle.pictextContent}></div>
        );
      } else if (data.coursewareType === 'vido') {
        const getApi = async (params: unknown) => {
          const { data: _data } = await videoApi.getPlayerAuthTokenApi(params);
          return _data;
        };
        return <YmVideoPlayer vid={data?.vedioId} getPlayerAuthTokenApi={getApi} {...videPlaySize} />;
      } else {
        return '该类型课件内容暂不支持展示';
      }
    }
  }, [data, videPlaySize]);

  return (
    <div>
      {loading || !data ? null : (
        <>
          <Descriptions
            labelStyle={{ width: 72, justifyContent: 'flex-end' }}
            column={2}
            className={noStyle ? undefined : 'ym_descriptions'}
          >
            <Descriptions.Item label="课件名称" span={1}>
              {data?.name}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间" span={1}>
              {data?.newCreateTime}
            </Descriptions.Item>
            <Descriptions.Item label="课件id" span={2}>
              {data?.coursewareId}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions column={2} className={noStyle ? undefined : 'ym_descriptions'}>
            <Descriptions.Item span={2}>{container}</Descriptions.Item>
          </Descriptions>
        </>
      )}
    </div>
  );
}
